import React, { useEffect, useState } from 'react';
import Nav from '../../../components/Nav/Nav';
import * as service from '../../../api/wy'
import '@/views/Index/Datatuwen/Datatuwen.scss'
import { Table, Button, Space, DatePicker,Progress} from 'antd';
import * as echarts from 'echarts';
import type { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';

interface Props {

}

// 用户直播表格数据
interface DataType {
    key: React.Key;
    name: string;
    phone: string;
    classy:string;
    yixue:string;
    shengyu:string;
    jindu:number;
    finish:string;
    lasttime:string;
}

function Datatuwen(props: Props) {

    var navigate = useNavigate()

    const { RangePicker } = DatePicker;

    let [datalist, setdatalist] = useState([]);//定义数据总览的数据

    let [tableData, setTableData] = useState<DataType[]>([])//定义学习数据表格数据

    //  获取数据总览数据 
    var tuwendatalist = async () => {
        var res = await service.tuwendatalist()
        console.log(res.data);
        setdatalist(res.data);
    }

    // 获取学习数据
    var studydata = async () => {
        var res = await service.studydata()
        console.log(res.data);
        setTableData(res.data);
    }

    // echarts绘制,获取图表数据
    var myChart: any = null;
    const detaillist = async () => {
        const res = await service.tuwencharts();
        console.log(res)
        res.data?.map((item: any) => {
            item.key = item.id
        })

        let blue = res.data.map((item: any) => {
            return item.blue
        })
        let yellow = res.data.map((item: any) => {
            return item.yellow
        })
        let green = res.data.map((item: any) => {
            return item.green
        })
        let xkedu = res.data.map((item: any) => {
            return item.xkedu
        })

        draw(blue, yellow, xkedu, green);
    }

    // 图表绘制数据
    var draw = (blue: any, yellow: any, xkedu: any, green: any) => {
        // 绘制图表
        myChart.setOption({
            backgroundColor: "#fff",

            xAxis: { //x轴设置
                // data: xAxis
                data: xkedu

            },
            yAxis: [{ // 纵轴标尺固定
                type: 'value',
                scale: true,
                max: 1250,
                min: 0,
                splitNumber: 6,
                // data: yAxis,
                boundaryGap: [0.2, 0.2]
            }],

            legend: { //图例
                bottom: 15,
                left: 410,
                // data: ['饼图', '销量', '价格']
            },
            calculable: true,
            series: [ //数据系列
                {
                    name: '订阅量',
                    type: 'line',//'line' , 'bar' , 'pie'
                    data: blue,
                    symbolSize: 0, //圆点大小

                    smooth: true, //是否平滑曲线显示
                    itemStyle: {
                        normal: {
                            color: 'blue', //折线颜色
                        }
                    }

                },
                {
                    name: '学习人数',
                    type: 'line',//'line' , 'bar' , 'pie'
                    data: green,
                    symbolSize: 0, //圆点大小

                    smooth: true, //是否平滑曲线显示
                    itemStyle: {
                        normal: {
                            color: 'green', //折线颜色
                        }
                    }
                },
                {
                    name: '完课人数',
                    type: 'line',//'line' , 'bar' , 'pie'
                    data: yellow,
                    symbolSize: 0, //圆点大小

                    smooth: true, //是否平滑曲线显示
                    itemStyle: {
                        normal: {
                            color: 'orange', //折线颜色
                        }
                    }
                }

            ]
        });
    }

    // 学习数据 表格数据
    const columns: ColumnsType<DataType> = [
        {
            title: '用户信息', //表格列的标题
            dataIndex: 'name', //数据索引( 属性名 )
            key: 'name',
            width: '180px',
            // ellipsis:true,
            render: (_, record) => {
                return (
                    <div className='xinxi' style={{
                        display: 'flex'
                    }}>
                        <img src="https://cdn7.axureshop.com/demo/1903216/images/%E7%9B%B4%E6%92%AD%E6%95%B0%E6%8D%AE/u2428.svg" />
                        <div className="msg" style={{
                            width: 150,
                            marginLeft: 10,
                        }}>
                            <div className='name'>{record.name}</div>
                            <div className='phone'>{record.phone}</div>
                        </div>
                    </div>
                )
            }
        },
        {
            title: '会员等级', //表格列的标题
            dataIndex: 'classy', //数据索引( 属性名 )
            key: 'classy',
            width: '100px',
            render: (_, record) => <p>{record.classy}</p>,//动态渲染标签/组件
        },
        {
            title: '已学习时长(h)', //表格列的标题
            dataIndex: 'yixue', //数据索引( 属性名 )
            key: 'yixue',
            width: '80px',
            render: (_, record) => <p>{record.yixue}</p>,//动态渲染标签/组件
        },
        {
            title: '剩余时长(h)', //表格列的标题
            dataIndex: 'shengyu', //数据索引( 属性名 )
            key: 'shengyu',
            width: '80px',
            render: (_, record) => <p>{record.shengyu}</p>,//动态渲染标签/组件
        },
        {
            title: '学习进度', //表格列的标题
            dataIndex: 'jindu', //数据索引( 属性名 )
            key: 'jindu',
            width: '100px',
            render: (_, record) => <Progress percent={record.jindu} size="small" status="active" />,//动态渲染标签/组件
        },
        {
            title: '完成时间', //表格列的标题
            // dataIndex: 'issale', //数据索引( 属性名 )
            key: 'finish',
            width: '160px',
            render: (_, record) => <p>{record.finish}</p>,//动态渲染标签/组件
        },
        {
            title: '上次学习时间', //表格列的标题
            // dataIndex: 'isseckill', //数据索引( 属性名 )
            key: 'lasttime',
            width: '160px',
            render: (_, record) => <p>{record.lasttime}</p>,//动态渲染标签/组件
        },
    ]

    useEffect(() => {
        myChart = echarts.init(document.getElementById('container') || document.body);
        tuwendatalist();
        detaillist();
        studydata();
    })
    let totuwen =()=>{
        navigate('/index/imagetext')
    }


    return (
        <div className='datatuwen'>
            <Nav />
            {/* 数据总览 */}
            <div className="alldata">
                <div className="name">数据总览</div>
                <div className="list">
                    {
                        datalist.map((item: any) => {
                            return (
                                <div className="box1">
                                    <div className="title">{item.text}</div>
                                    <div className="num">{item.number}</div>
                                </div>
                            )
                        })

                    }

                </div>
            </div>
            {/* Echarts图表 */}
            <div className="bigbox">
                <div className="timu">
                    <div className="renshu">详细数据</div>
                    <div className="date">
                        统计日期
                        <Space className='space' direction="vertical" size={12} >
                            <RangePicker />
                        </Space>
                    </div>
                    <div className="tip">
                        <span>今日</span>
                        <span>昨日</span>
                        <span>最近7天</span>
                        <span>最近30天</span>
                    </div>
                </div>
                <div id='container'></div>
            </div>
            {/* 学习数据 */}
            <div className="studydata">
                <div className="one">
                    <div className="left">学习数据</div>
                    <Button className="right">批量导出</Button>
                </div>
                <div className="table">
                    <Table columns={columns} dataSource={tableData} pagination={{ pageSize: 10 }} />
                </div>
                <Button onClick={totuwen}>返回</Button>
            </div>
        </div>
    );
}

export default Datatuwen;